<template>
	<view class="content">
		<view class="tips-item">
			<view class="tip iconfont icon-gantanhao">
				<text class="txt">提示：所填写的内容和所提供的材料真实准确，如有虚报冒领等行为，将承担相应的法律责任并接受相关处罚。</text>
			</view>
		</view>
		<view class="info-block">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">客户信息</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">姓名</view>
				</view>
				<view class="form-content">
					<input v-model="form.name" maxlength="30" type="text" placeholder="请填写姓名"
						placeholder-class="inputPlaceholder" class="form-ctrl" placeholder-style="color:#000;" />
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">身份证号</view>
				</view>
				<view class="form-content">
					<input v-model="form.identity" maxlength="18" type="number" placeholder="请填写身份证号"
						placeholder-class="inputPlaceholder" class="form-ctrl" placeholder-style="color:#000;" />
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">民族</view>
				</view>
				<view class="form-content">
					<picker :range="nation" range-key="dictLabel" @change="bindNation" class="form-ctrl"
						:value="form.nationIndex">
						{{form.nationIndex==-1 ? "请选择民族" : nation[form.nationIndex]['dictLabel']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">婚姻状况</view>
				</view>
				<view class="form-content">
					<picker :range="marriage" range-key="value" @change="bindMarriage" class="form-ctrl"
						:value="form.marriageIndex">
						{{form.marriageIndex==-1 ? "请选择婚姻状态" : marriage[form.marriageIndex]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">手机号码</view>
				</view>
				<view class="form-content">
					<input v-model="form.phone" maxlength="11" type="number" placeholder="请填写手机号码"
						placeholder-class="inputPlaceholder" class="form-ctrl" placeholder-style="color:#000;" />
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">其它联系方式</view>
				</view>
				<view class="form-content">
					<input v-model="form.otherPhone" maxlength="11" type="number" placeholder="请填写其它联系方式"
						placeholder-class="inputPlaceholder" class="form-ctrl" placeholder-style="color:#000;" />
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">家庭所属区划市</view>
				</view>
				<view class="form-content">
					<picker :range="market" range-key="value" @change="bindMarket" class="form-ctrl"
						:value="form.marketIndex">
						{{form.marketIndex==-1 ? "请选择家庭所属区划市" : market[form.marketIndex]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">家庭所属区划县</view>
				</view>
				<view class="form-content">
					<picker :range="county" range-key="value" @change="bindCounty" class="form-ctrl"
						:value="form.countyIndex">
						{{form.countyIndex==-1 ? "请选择家庭所属区划县" : county[form.countyIndex]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view style="display: flex;flex-direction: row;">
					<view style="color: #C10A11;">*</view>
					<view class="form-label">详细地址</view>
				</view>
				<view class="form-content">
					<input v-model="form.detailAddress" @click="chosenPosition" type="text" placeholder="请选择详细地址"
						disabled="true" placeholder-class="inputPlaceholder" class="form-ctrl"
						placeholder-style="color:#000;" />
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="handleSave">下一步</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		idCardValidate
	} from '@/util/idCardValidate';
	export default {
		data() {
			return {
				id: null,
				form: {
					name: '',
					identity: '',
					nationIndex: -1,
					marriageIndex: -1,
					phone: '',
					otherPhone: '',
					marketIndex: -1,
					countyIndex: -1,
					detailAddress: '',
					latitude: '',
					longitude: ''
				},
				rules: {
					name: {
						name: '姓名',
						required: true
					},
					identity: {
						name: '身份证号',
						required: true
					},
					phone: {
						name: '手机号码',
						required: true,
						validator: function(value, form, callback) {
							const phoneReg =
								/^((\+|00)86)?((134\d{4})|((13[0-3|5-9]|14[1|5-9]|15[0-9]|16[2|5|6|7]|17[0-8]|18[0-9]|19[0-2|5-9])\d{8}))$/;

							if (value.length != 11) {
								callback('请输入正确的手机号');
							} else if (!phoneReg.test(value)) {
								callback('请输入正确的手机号');
							}
							callback();
						}
					},
					otherPhone: {
						name: '其它联系方式',
						required: true
					},
					detailAddress: {
						name: '详细地址',
						required: true
					},
					marriageIndex: {
						name: '婚姻状况',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择婚姻状态')
							}
							callback();
						}
					},
					nationIndex: {
						name: '民族',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择民族')
							}
							callback();
						}
					},
					marketIndex: {
						name: '家庭所属区划市',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择家庭所属区划市')
							}
							callback();
						}
					},
					countyIndex: {
						name: '家庭所属区划县',
						required: true,
						validator: function(value, form, callback) {
							if (value < 0) {
								callback('请选择家庭所属区划县')
							}
							callback();
						}
					},
				},
				nation: [{
					id: 1,
					dictLabel: '汉族'
				}],
				marriage: [{
						id: 1,
						value: '未婚'
					},
					{
						id: 2,
						value: '已婚'
					}
				],
				market: [{
					id: 1,
					value: '酒泉市'
				}],
				county: [{
					id: 1,
					value: '阿克塞'
				}]
			}
		},
		methods: {
			bindNation(e) {
				this.form.nationIndex = e.detail.value;
			},
			bindMarriage(e) {
				this.form.marriageIndex = e.detail.value;
			},
			bindMarket(e) {
				this.form.marketIndex = e.detail.value;
			},
			bindCounty(e) {
				this.form.countyIndex = e.detail.value;
			},
			chosenPosition() {
				//获取当前位置
				var that = this;
				const currentLocation = uni.getLocation({
					isHighAccuracy: true,
					success(current) {
						const currentLatitude = current.latitude;
						const currentLongitude = current.longitude;
						uni.chooseLocation({
							latitude: currentLatitude,
							longitude: currentLongitude,
							success: (choosen) => {
								delete choosen.errMsg;
								that.form.detailAddress = choosen.address;
								that.form.latitude = choosen.latitude;
								that.form.longitude = choosen.longitude;
							},
							fail: (err) => {
								console.log(err);
								showToast('选择位置失败，请重试！');
							}
						})
					},
					fail: (e) => {
						console.log(e);
						showToast('获取位置失败，请重试！');
					}
				})
			},
			goBack() {
				uni.redirectTo({
					url: '/page_other/business_loan/apply_information'
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					const idcard = idCardValidate(this.form.identity);
					if (!idcard.result) {
						this.showToast('请输入正确身份证号码', () => {});
						return;
					}
					uni.redirectTo({
						url: '/page_other/business_loan/apply_information'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;

		.tips-item {
			display: flex;
			flex-direction: column;
			color: #F4982B;
			background: #FFF0D6;
			padding: 20rpx;
			border-radius: 20rpx;

			.tips {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx;
				font-size: 24rpx;
			}

			.iconfont {
				font-size: 14px;

				.txt {
					margin-left: 16rpx;
					font-size: 14px;
					line-height: 50rpx;
				}
			}
		}

		.info-block {
			margin-top: 30rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			.title {
				margin-top: 30rpx;
				font-size: 38rpx;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					color: #999;
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form-ctrl {
						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}


		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF0015;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>